<template>
    <fieldset>
        <legend>二级联动</legend>
        <select v-model="aaa" @change="ccc">
            <option v-for="item in arr" :key="item.id" :value="item.id">{{item.name}}</option>
        </select>
        <select v-model="bbb">
            <option v-for="item in ddd" :key="item.id" :value="item.id">{{item.name}}</option>
        </select>

    </fieldset>

</template>
<script>
    import * as api from '@/api/select'
    export default{
        data () {
            return {
                arr:[],
                aaa:1,
                bbb:'',
                ddd:[]    
            }
        },
        mounted(){
            api.fetchData()
            .then(res=>{
                // console.log(res);
                this.arr=res
            })
            this.ccc()

        },
        methods: {
            ccc(){
                this.bbb=this.aaa
                api.fetchCity(this.bbb)
            .then(res=>{
                // console.log(res);
                this.bbb=res[0].id
                this.ddd=res
            })
                // console.log(this.ddd);
            }
        }
    }


</script>
<style>
    select{
        width: 100px;
    }



</style>